import Heading from 'components/Heading';
import Paragraph from 'components/Paragraph';
import styled from 'styled-components';
import { card } from 'utils/mixins';

const NoteImage = styled.img`
    grid-area: image;
    width: 60px;
    height: 60px;
    object-fit: cover;
`;

const NoteTitle = styled(Heading).attrs({ level: 2 })`
    grid-area: title;
    align-self: center;
`;

const NoteExcerpt = styled(Paragraph).attrs({ size: "small" })`
    grid-area: excerpt;
    align-self: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
`;

const NotePublishTime = styled(Paragraph).attrs({ type: "secondary" })`
    grid-area: time;
    justify-self: end;
`;

const StyledNoteCard = styled.div`
    ${card()}
    display: grid;
    grid-template-areas:
    "image title time"
    "image excerpt excerp";
    grid-template-columns: 72px 2fr 1fr;
`;

export default StyledNoteCard;
export { NoteImage, NoteTitle, NoteExcerpt, NotePublishTime };